<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>显示模式</title>
  </head>
  <body>
    1.显示模式的概念 就是 元素标签html在网页中是以什么方式显示的， 比如 div
    的显示方式 是独占一行的 span 的显示方式 是不独占一行
    <div>我爱周杰伦</div>
    <div>我爱杨丞琳</div>
    <span>哈哈哈</span>
    <span>哈哈哈</span>
    <span>哈哈哈</span>
    重点： 独占一行的标签，块级元素 特点:宽高可设置 div
    不独占一行，可以同时在一行的标签，行内元素 特点：宽高不可设置 span
    不独占一行的同时也可以设置宽高，行内块元素 img
    <img
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fimages01%2F20210604%2Fcbc7088160274e5485ba003225cd599b.jpeg&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645761846&t=99866c32a8ec8fb4e49425b6a2428c7d"
      alt="龚俊"
    />
    <span>sddfs</span>
    <span>djkfhskd</span>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: chartreuse;
      }
      span {
        width: 300px;
        height: 300px;
        background-color: cyan;
      }
      img {
        width: 300px;
        height: 500px;
      }
      a {
        display: inline-block;
        width: 300px;
        height: 300px;
        background-color: red;
      }
    </style>
    <a href="#demo1">呵呵</a>
    <a href="#demo2">哈哈</a>
  </body>
</html>
